<template>
    <!-- 首页 -->
    <div class="index">
        <div style="margin-bottom: 20px">
            <el-button type="success" @click="openDir('json')">输入路径(json)</el-button>
            <el-button type="success" @click="openDir('svg')">输出路径(svg)</el-button>
        </div>
        <el-form ref="dataForm" size="medium" :model="dataForm" :rules="dataRule" label-width="120px" label-position="top">
            <el-row :gutter="10">
                <el-col class="radio-normal class_svgStyle" :span="24">
                    <el-form-item label="版式:" prop="svgStyle">
                        <el-radio-group v-model="dataForm.svgStyle" size="medium" :disabled="false">
                            <el-radio v-for="item in svgStyle_Options" :key="item.value" :border="true" :label="item.value">
                                {{ item.label }}
                                <br />
                                <div class="preview-img">
                                    <img :src="require(`../assets/imgs/${item.value}.png`)" alt="" />
                                    <!-- <el-image
                                        :fit="'contain'"
                                        style="width: 100%; height: 100%"
                                        :src="require(`../assets/imgs/${item.value}.png`)"
                                        :preview-src-list="[require(`../assets/imgs/${item.value}.png`)]"
                                    >
                                    </el-image> -->
                                </div>
                                <div class="scale" @click="maxImg(`${item.value}.png`)">
                                    <svg t="1645668366071" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2117" width="18" height="18">
                                        <path
                                            d="M423.449389 846.257122a423.122426 423.122426 0 1 1 422.807837-422.807837 423.437016 423.437016 0 0 1-422.807837 422.807837z m0-751.553514a328.745677 328.745677 0 1 0 328.431088 328.745677A329.060266 329.060266 0 0 0 423.449389 94.703608z"
                                            fill="#505050"
                                            p-id="2118"
                                        ></path>
                                        <path
                                            d="M624.062899 690.661321l66.755821-66.692903L1024.000104 957.149803l-66.724361 66.692902zM365.564983 249.796066h115.768812v346.991848h-115.768812z"
                                            fill="#505050"
                                            p-id="2119"
                                        ></path>
                                        <path d="M596.788019 365.564878v115.768813H249.79617v-115.768813z" fill="#505050" p-id="2120"></path>
                                    </svg>
                                </div>
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col class="radio-normal class_svgWay" :span="24">
                    <el-form-item label="合版方式:" prop="svgWay">
                        <el-radio-group v-model="dataForm.svgWay" size="medium" :disabled="false">
                            <el-radio v-for="item in svgWay_Options" :key="item.value" :border="true" :label="item.value">
                                {{ item.label }}
                            </el-radio>
                        </el-radio-group>
                    </el-form-item>
                </el-col>
                <el-col class="input-number-normal class_rowNum" :span="6">
                    <el-form-item label="合版行数:" prop="rowNum">
                        <el-input-number v-model="dataForm.rowNum" controls-position="none" :min="2" :max="999" :precision="0" :step="1" :disabled="false"></el-input-number>
                    </el-form-item>
                </el-col>
                <el-col class="input-number-normal class_colNum" :span="12">
                    <el-form-item label="合版列数:" prop="colNum">
                        <el-input-number v-model="dataForm.colNum" controls-position="none" :min="2" :max="999" :precision="0" :step="1" :disabled="false"></el-input-number>
                    </el-form-item>
                </el-col>
                <el-col class="input-number-normal class_imgNumBegin" :span="24">
                    <el-form-item label="图号初始值:" prop="imgNumBegin">
                        <el-input-number v-model="dataForm.imgNumBegin" controls-position="none" :min="0" :max="999" :precision="0" :step="1" :disabled="false"></el-input-number>
                    </el-form-item>
                </el-col>
                <el-col class="input-number-normal class_rowNum" :span="6">
                    <el-form-item label="生成excel:" prop="rowNum">
                        <el-switch v-model="dataForm.exportExcel" active-color="#13ce66" inactive-color="#ff4949" active-text="启用" inactive-text="关闭"> </el-switch>
                    </el-form-item>
                </el-col>
                <el-col class="input-number-normal class_rowNum" :span="6">
                    <el-form-item label="svg转png:" prop="rowNum">
                        <el-switch v-model="dataForm.svgToPng" active-color="#13ce66" inactive-color="#ff4949" active-text="启用" inactive-text="关闭"> </el-switch>
                    </el-form-item>
                </el-col>
                <el-col class="button-normal class_prop5" :span="24">
                    <div class="el-form-item">
                        <el-button style="width: 200px" @click="runSVG" :round="false" size="medium" :disabled="false" type="primary">开始生成</el-button>
                    </div>
                </el-col>
            </el-row>
        </el-form>
        <div class="f-dialog">
            <el-dialog title="版式预览" :visible.sync="visible" custom-class="table-dialog">
                <img :src="maxImgSrc" alt="" />
            </el-dialog>
        </div>
        <canvas id="mycanvas"></canvas>
        <canvas id="wewincanvas" style="display: none"></canvas>
    </div>
</template>

<script>
var templateRun = require("./now-template/template-run").default;
var { fse, dot } = require("./now-template/require-public").default;

export default {
    name: "index",
    data() {
        return {
            visible: false,

            dataForm: {
                // 版式
                svgStyle: "40-40",

                // 合版方式
                svgWay: "single",

                // 合版行数
                rowNum: 3,

                // 合版列数
                colNum: 3,

                // 图号初始值
                imgNumBegin: 0,

                // 生成excel
                exportExcel: false,

                // svg转png
                svgToPng: false,
            },
            dataRule: {},

            // 单选框选项 - 版式
            svgStyle_Options: [
                { label: "40mm * 40mm", value: "40-40" },
                { label: "80mm * 80mm", value: "80-80" },
                { label: "300mm * 200mm", value: "300-200" },
                { label: "70mm * 40mm", value: "70-40" },
            ],

            // 单选框选项 - 合版方式
            svgWay_Options: [
                { label: "单文件", value: "single" },
                { label: "多文件", value: "multi" },
            ],

            maxImgSrc: "",

            nowTemplateModuleArr: {},

            loadingTemp: {},
        };
    },
    created() {
        window.showLoading = this.showLoading;
        window.clearLoading = this.clearLoading;
        window.nextTickFunc = this.nextTickFunc;

        fse.ensureDirSync(process.cwd() + `/jsons`);
        fse.ensureDirSync(process.cwd() + `/svgs`);
    },
    mounted() {
        var canvas = document.getElementById("wewincanvas");
        window.measureCanvas = canvas.getContext("2d");
    },
    methods: {
        // 切换版式类型
        gotoType(type) {
            this.$router.push({ path: `/${type}` });
        },

        // 执行
        runSVG() {
            console.log(this.dataForm);
            var options = {};
            switch (this.dataForm.svgStyle) {
                case "40-40":
                    options = {
                        width: 40 * dot,
                        height: 40 * dot,
                        selfRowNum: 4,
                        selfColNum: 6,
                        selfOffsetX: 3.4 * dot,
                        selfOffsetY: 6.3 * dot,
                        selfTempX: 3.4 * dot,
                        selfTempY: 15.24 * dot,
                        qrcodeWidth: 20 * dot,
                        selfGroupOffset: 15,
                        starScale: 4.2,
                        starOffsetX: 57,
                        starOffsetY: 30,
                        codeFontSize: 27,
                        desFontSize: 2.7 * dot,
                    };
                    break;
                case "80-80":
                    options = {
                        width: 80 * dot,
                        height: 80 * dot,
                        selfRowNum: 2,
                        selfColNum: 3,
                        selfOffsetX: 3.4 * dot,
                        selfOffsetY: 6.3 * dot,
                        selfTempX: 3.4 * dot,
                        selfTempY: 15.24 * dot,
                        qrcodeWidth: 40 * dot,
                        selfGroupOffset: 15,
                        starScale: 4.5,
                        starOffsetX: 115,
                        starOffsetY: 65,
                        codeFontSize: 55,
                        desFontSize: 3 * dot,
                    };
                    break;
                case "300-200":
                    options = {
                        width: 300 * dot,
                        height: 200 * dot,
                        selfRowNum: 2,
                        selfColNum: 1,
                        selfOffsetX: 3.4 * dot,
                        selfOffsetY: 6.3 * dot,
                        selfTempX: 3.4 * dot,
                        selfTempY: 15.24 * dot,
                        qrcodeWidth: 80 * dot,
                        selfGroupOffset: 15,
                        starScale: 11,
                        starOffsetX: 890,
                        starOffsetY: 240,
                        codeFontSize: 160,
                        desFontSize: 3.5 * dot,
                    };
                    break;
                case "70-40":
                    options = {
                        width: 70 * dot,
                        height: 40 * dot,
                        selfRowNum: 4,
                        selfColNum: 4,
                        selfOffsetX: 3.4 * dot,
                        selfOffsetY: 6.3 * dot,
                        selfTempX: 3.4 * dot,
                        selfTempY: 15.24 * dot,
                        qrcodeWidth: 20 * dot,
                        selfGroupOffset: 15,
                        starScale: 2.7,
                        starOffsetX: 197,
                        starOffsetY: 30,
                        codeFontSize: 46,
                        desFontSize: 2.7 * dot,
                    };
                    break;
            }
            options.tagType = this.dataForm.svgStyle;
            var templateRunObj = new templateRun(options);
            templateRunObj.run(this.dataForm);
        },

        openDir(type) {
            this.$electron.shell.openExternal(process.cwd() + `/${type}s`);
        },

        // 图片放大预览
        maxImg(src) {
            this.visible = true;
            this.maxImgSrc = require(`@/assets/imgs/${src}`);
        },

        showLoading(obj) {
            this.loadingTemp = this.$loading(
                obj
                    ? obj
                    : {
                          lock: true,
                          text: "生成中...",
                          spinner: "el-icon-loading",
                          background: "rgba(0, 0, 0, 0.7)",
                      }
            );
        },

        clearLoading() {
            this.loadingTemp ? this.loadingTemp.close() : "";
        },

        nextTickFunc(func) {
            this.$nextTick(() => {
                func ? func() : "";
            });
        },
    },
};
</script>

<style lang="scss">
.index {
    padding: 10px 30px 0 30px;
    box-sizing: border-box;
    overflow-y: auto;
    .el-form {
        width: 890px;
        .el-form-item__label {
            font-weight: bold;
            font-size: 20px;
        }
    }
    .class_svgStyle {
        .el-radio.is-bordered {
            height: auto !important;
        }
        .preview-img {
            height: 150px;
            width: 150px;
            img {
                width: 100%;
                height: 100%;
                object-fit: contain;
            }
        }
        .scale {
            cursor: pointer;
            position: absolute;
            bottom: 3px;
            right: 3px;
        }
    }
    .table-dialog {
        width: 90%;
        height: 90%;
        img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }
    }
    #mycanvas {
        display: none;
    }
}
</style>
